
/**
 * @desc 接送站设置，新增/修改食品弹框
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="632px"
    >
      <el-scrollbar v-loading="loading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="Api_POST_FoodCreateDto" class="gl_form_mini" :model="Api_POST_FoodCreateDto" :rules="Api_POST_FoodCreateDto_Rules" label-position="top" label-width="120px" style="padding:0 30px">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="personalUserInfo_img_wrap">
                <el-form-item label="食品图片" prop="imagePath">
                  <el-input v-show="false" v-model.trim="Api_POST_FoodCreateDto.imagePath" />
                  <photo-cropper-dialog
                    ref="photoCropper"
                    class="gl_dialog_TitleLine"
                    auto-crop-width="300px"
                    auto-crop-height="300px"
                    :fixed-number="[213, 200]"
                    :enlarge="1"
                    @photoCropperSave="photoCropperSave"
                  />
                  <div class="upload_game_img" @click="openPhotoCropper">
                    <img v-if="Api_POST_FoodCreateDto.imagePath" class="show_img" :src="getStaticPhotoUrl(Api_POST_FoodCreateDto.imagePath)" @error="errorPhoto">
                    <i v-else class="el-icon-plus" />
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="18" style="">
              <div style="margin-top:110px">
                <span class="tip_info_style">文件格式：jpg、jpeg、png</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="餐别" prop="foodTypeCode">
                <el-radio-group v-model="Api_POST_FoodCreateDto.foodTypeCode">
                  <el-radio v-for="item in dict.foodType" :key="item.code" :label="item.code">{{ item.value }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="食品名称" prop="name">
                <el-input v-model="Api_POST_FoodCreateDto.name" placeholder="请输入" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogVisible = false">{{ $t('button.cancel') }}</el-button>
        <!-- 保存按钮 -->
        <el-button v-if="type == 'edit'" type="primary" :loading="submitLoading" size="mini" @click="saveEdit()">确 定</el-button>
        <!-- 保存按钮 -->
        <el-button v-else type="primary" :loading="submitLoading" size="mini" @click="saveNew()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import defaultHotelImg from '@/assets/images/face_default.png';
import validator from '@/lib/validate/index.js';
import { SiSTKWEventsManagementFoodCreateDto } from '@/lib/form/game/swaggerForm';
import photoCropperDialog from '../photoCropperDialog';
import { CopyData } from '@/lib';

export default {
  components: {
    photoCropperDialog
  },
  props: {
    district: {
      type: Array,
      default() {
        return [];
      }
    },
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    dictAll: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      Api_POST_FoodCreateDto: new SiSTKWEventsManagementFoodCreateDto(),
      photoCropperVisible: false, // 上传图片窗口的显示与隐藏
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      photoCropperOption: {
        img: '',
        autoCropWidth: '213px',
        autoCropHeight: '200px',
        enlarge: 1,
        fixedNumber: [213, 200]
      },
      Api_POST_FoodCreateDto_Rules: { // 必填项，验证密码格式
        imagePath: [
          { required: true, message: '请上传食品照片', trigger: 'blur' }
        ],
        name: [
          validator.required('食品名称不能为空')
        ],
        // 餐别选择
        foodTypeCode: [
          { required: true, message: '请选择餐别', trigger: 'blur' }
        ]
      },
      title: '',
      loading: false,
      submitLoading: false,
      dialogVisible: false,
      type: '', // 弹框状态，是新增和是修改 new 是新增，edit是修改
      rowId: '' // 编辑时候的id
    };
  },
  computed: {
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['Api_POST_FoodCreateDto'].resetFields();
      }
    }
  },
  methods: {
    // 地址栏改变
    changeAddressData() {
      this.Api_POST_FoodCreateDto.countyCode = this.Api_POST_FoodCreateDto.addressData[0] || '';
      this.Api_POST_FoodCreateDto.provinceCode = this.Api_POST_FoodCreateDto.addressData[1] || '';
      this.Api_POST_FoodCreateDto.cityCode = this.Api_POST_FoodCreateDto.addressData[2] || '';
    },
    // 根据用户id获取信息
    api_GET_EventsManagementFoodId() {
      api_GET_EventsManagementFoodId(this.rowId).then(res => {
        CopyData(res, this.Api_POST_FoodCreateDto);
        this.loading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.loading = false;
      });
    },
    open(row, type) {
      this.loading = true;
      this.type = type;
      this.rowId = row ? row.id : '';
      this.title = type === 'edit' ? '编辑食品' : '添加食品';
      if (this.type === 'edit') {
        this.Api_POST_FoodCreateDto = new SiSTKWEventsManagementFoodCreateDto();
        CopyData(row, this.Api_POST_FoodCreateDto);
        this.loading = false;
      } else {
        this.Api_POST_FoodCreateDto = new SiSTKWEventsManagementFoodCreateDto();
        this.Api_POST_FoodCreateDto.foodTypeCode = 'Breakfast'; // 设置默认的餐别
        this.$set(this.Api_POST_FoodCreateDto, 'addressData', []);
        this.loading = false;
      }
      this.$nextTick(() => {
        this.dialogVisible = true;
      });
    },
    // 新增
    saveNew() {
      this.submitLoading = true;
      console.log(this.Api_POST_FoodCreateDto);
      const returnData = new SiSTKWEventsManagementFoodCreateDto();
      CopyData(this.Api_POST_FoodCreateDto, returnData);
      returnData.restaurantId = this.rowId;
      this.$refs.Api_POST_FoodCreateDto.validate(valid => {
        if (valid) {
          this.$emit('insert', returnData);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 修改
    saveEdit() {
      this.submitLoading = true;
      console.log(this.Api_POST_FoodCreateDto);
      const returnData = new SiSTKWEventsManagementFoodCreateDto();
      CopyData(this.Api_POST_FoodCreateDto, returnData);
      this.$refs.Api_POST_FoodCreateDto.validate(valid => {
        if (valid) {
          this.$emit('update', returnData);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 获取静态文件
    getStaticPhotoUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 点击保存照片裁剪窗口
    photoCropperSave (fileUrl) {
      this.$set(this.Api_POST_FoodCreateDto, 'imagePath', fileUrl.tempUrl);
    },
    // 点击打开照片裁剪窗口
    openPhotoCropper () {
      this.$refs.photoCropper.open(this.Api_POST_FoodCreateDto.imagePath);
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    }
  }
};
</script>
<style lang="scss" scoped>
  .tip_info_style {
    // padding: 0 10px 0 30px;
    font-size: 14px;
    color: #C0C4CC;
  }
  .personalUserInfo_img_wrap .el-form-item__error {
    padding-left: 10px;
  }
  .upload_game_img.no_pointer {
    cursor: default;
  }
  .upload_game_img {
    width: 102px;
    height: 96px;
    line-height: 94px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: middle;
  }
</style>
